<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // 使用let声明变量:
        //     1.不能重复声:以let 声明的变量不能被再次声明，且被其它方式声明的变量也不能被let 再次声明
        //     2.无变量提升:以let 声明的变量不能在变量声明前进行使用
        //     3.暂时性死区:：ES6为通过let声明的变量提供了块作用域的特性，被定义在块中的let变量只能在块中使用

        let username="alice";
        console.log(username);
        // let username="tom";//报错
        // console.log(username);
        // var username="coco";//报错


        //无变量提升
        // console.log(hobby);//报错
        let hobby="吃饭";

        window.onload=function(){
            var lis=document.querySelectorAll("li");//集合
            // for(var i=0;i<lis.length;i++){//0  1  2
            //     lis[i].onclick=function(){
            //         console.log("您点击了第"+(i+1)+"个li");
            //     };
            // }

            //暂时性死区
            for(let i=0;i<lis.length;i++){
                lis[i].onclick=function(){
                    console.log("您点击了第"+(i+1)+"个li");
                };
            }

        };


    </script>
</head>
<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
</body>
</html>